<template>
  <div class="content-detail check-times">
    <div class="card-box--headerwrap">
      <el-page-header
        icon="el-icon-arrow-left"
        content="检查反馈详情"
        @back="handleBack"
      ></el-page-header>
    </div>

    <el-card>
      <el-timeline class="content-box">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="activity.color"
        >
          <div class="content-detail">
            <!-- :color="activity.color"
          :timestamp="activity.timestamp" -->
            <div class="node-box">
              <div class="left">{{ activity.nodeName }}</div>
              <div class="right">
                <span>{{ activity.assignee }}</span>
                <template v-if="activity.createTime">
                  <el-divider direction="vertical" />
                  <span>操作时间: {{ activity.createTime }}</span>
                </template>
              </div>
            </div>

            <el-form class="form-box" label-width="160px">
              <template v-if="activity.nodeId === 'ACT_010'">
                <el-form-item label="是否合格">
                  <el-radio-group v-model="activity.isQualifiedCheck">
                    <el-radio
                      label="合格"
                      v-if="activity.isQualifiedCheck === '合格'"
                      >合格</el-radio
                    >
                    <el-radio
                      label="不合格"
                      v-if="activity.isQualifiedCheck === '不合格'"
                      >不合格</el-radio
                    >
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="检查小结">
                  <div class="handle">{{ activity.insSummary }}</div>
                </el-form-item>

                <el-form-item label="举牌验收照片">
                  <el-upload
                    disabled
                    name="uploadFile"
                    v-model:file-list="activity.jpysAttachment"
                    :on-preview="handlePreview"
                  ></el-upload>
                </el-form-item>

                <el-form-item label="主要控制项目测量照片">
                  <el-upload
                    disabled
                    name="uploadFile"
                    v-model:file-list="activity.kzxmclAttachment"
                    :on-preview="handlePreview"
                  ></el-upload>
                </el-form-item>

                <el-form-item label="验收人员名单">
                  <el-upload
                    disabled
                    name="uploadFile"
                    v-model:file-list="activity.ysrymdAttachment"
                    :on-preview="handlePreview"
                  ></el-upload>
                </el-form-item>

                <el-form-item label="验收人员照片">
                  <el-upload
                    disabled
                    name="uploadFile"
                    v-model:file-list="activity.ysryzpAttachment"
                    :on-preview="handlePreview"
                  ></el-upload>
                </el-form-item>
              </template>
              
              <template v-else-if="activity.nodeId === 'end'">
                <el-form-item label="检查小结">
                  <div class="handle">{{ activity.insSummary }}</div>
                </el-form-item>
              </template>
              
              <template v-else>
                <el-form-item label="检查结论">
                  <el-radio-group>
                    <el-radio label="1">通过</el-radio>
                    <el-radio label="0">不通过</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="整改照片">
                  <span></span>
                  <el-upload
                    name="uploadFile"
                    v-model:file-list="activity.zgzpAttachment"
                    :on-preview="handlePreview"
                  ></el-upload>
                </el-form-item>

                <el-form-item label="整改信息">
                  <div class="handle">{{activity.reformDetail}}</div>
                </el-form-item>
              </template>
            </el-form>
          </div>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-if="!activities.length" description="暂无记录"></el-empty>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, defineEmits } from "vue";
import { postApproveHistory } from "/@/api/acceptance";
import { download } from "/@/utils/download";
const props = defineProps({
  instanceId: {
    type: Number || String,
    required: true
  }
});
const emit = defineEmits(["closeDetail"]);
const activities = ref([]);
const getTableData = async () => {
  const { instanceId } = props;
  if (!instanceId) {
    return;
  }
  const params = {
    instanceId
  };
  const { code, data } = await postApproveHistory(params);
  if (code === 200) {
    data.forEach(item => {
      // if (item.eflag === 1) {
      //   item.color = "#FF0000";
      // } else {
      //   item.color = "#409EFF";
      // }
      // if (item.type === "recall") {
      //   item.opinion = "撤回";
      // }

      if (item.nodeId === "ACT_010") {
        const list = item.opinion.split("#e#");
        const jpysAttachment = list[2].split("举牌验收照片:");
        const kzxmclAttachment = list[3].split("主要控制项目测量照片:");
        const ysrymdAttachment = list[4].split("验收人员名单:");
        const ysryzpAttachment = list[5].split("验收人员照片:");
        item.isQualifiedCheck = list[0].slice(5);
        item.insSummary = list[1].slice(5);
        item.jpysAttachment = onInitFileList(
          JSON.parse(jpysAttachment[jpysAttachment.length - 1])
        );
        item.kzxmclAttachment = onInitFileList(
          JSON.parse(kzxmclAttachment[kzxmclAttachment.length - 1])
        );
        item.ysrymdAttachment = onInitFileList(
          JSON.parse(ysrymdAttachment[ysrymdAttachment.length - 1])
        );
        item.ysryzpAttachment = onInitFileList(
          JSON.parse(ysryzpAttachment[ysryzpAttachment.length - 1])
        );
      }
      else if(item.nodeId === "end"){

      }
      else{
        if(item.opinion){
          const list = item.opinion.split("#e#");
          const zgzpAttachment = list[1].split("整改照片:");
          item.reformDetail = list[0].slice(5);
          item.zgzpAttachment = onInitFileList(JSON.parse(zgzpAttachment[zgzpAttachment.length - 1]));
        }
      }

      // if (item.opinion.indexOf("举牌验收照片") > -1) {
      //   const fileList = list[list.length - 1];
      //   const signList = fileList.split("会签记录:");
      //   item.signFileList = JSON.parse(signList[signList.length - 1]);
      //   item.signFileList.map(el => {
      //     el["name"] = el.fileName;
      //   });
      //   item.list = list.slice(0, -1);
      // } else {
      //   item.list = [...list];
      // }
      console.log(item);
    });
    activities.value = data;
  }
};

// 初始化回显文件
const onInitFileList = (list: any[]) => {
  if (!list || !list.length || !list[0]?.fileName) return;
  const newFileList = list.map(item => {
    return {
      name: item?.fileName,
      response: {
        data: item,
        code: 200
      }
    };
  });
  return newFileList;
};

const handlePreview = file => {
  console.log(file, "file");
  if (file?.response?.code !== 200 || !file?.response?.data) return;
  download(file?.response?.data);
};

const handleBack = () => {
  emit("closeDetail");
};

getTableData();

watch(
  () => props.instanceId,
  () => {
    getTableData();
  }
);
</script>
<style lang="scss" scoped>
.check-times {
  font-family: PingFangSC-Medium, PingFang SC;
  color: #495164;
  font-size: 16px;
  :deep .el-page-header__left {
    color: #5298ff;
    font-size: 16px;
    font-weight: 400;
  }
  .content-box {
    .content-detail {
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e4e8f2;
      .node-box {
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fdfdff;
        .left {
          font-size: 16px;
          font-weight: bold;
          color: #495164;
        }
        .right {
          display: flex;
          .el-form-item__label {
            color: #495164;
          }
          align-items: center;
        }
        :deep .el-divider--vertical {
          margin: 0 12px;
        }
        span {
          font-weight: 400;
          color: #8895b7;
        }
      }
      .form-box {
        padding: 10px;
        :deep .el-form-item__label {
          color: #495164;
        }
        :deep .el-upload {
          display: none;
        }
        :deep .el-upload-list__item {
          margin-top: 4px;
        }
        .handle {
          color: #8895b7;
          padding: 6px 0 6px 12px;
          background: #fdfdff;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>
